<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>场馆课程</title>
   <link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">
<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
    <link rel="stylesheet" href="../css/classShow.css">

    <script type="text/javascript">
        $(function () {
            $("#header").load("../zlz/header.html");
        })
    </script>
</head>
<body>
<div id="header"></div>
<div class="container">
    <div class="row">
        <div class="box-table" id="classTable" style="width: 1200px;">
            <div class="table-con">
                <table>
                    <tbody>
                    <tr style="text-align: center;">
                        <td class="tp-head">
                        </td>
                        <td class="tp-head">
                            <h4>8:00-10:00</h4>
                        </td>
                        <td class="tp-head">
                            <h4>10:00-12:00</h4>
                        </td>
                        <td class="tp-head">
                            <h4>14:00-16:00</h4>
                        </td>
                        <td class="tp-head">
                            <h4>16:00-18:00</h4>
                        </td>
                        <td class="tp-head">
                            <h4>18:00-20:00</h4>
                        </td>
                        <td class="tp-head">
                            <h4>20:00-22:00</h4>
                        </td>
                    </tr>
                    <tr v-for="(day,key) in weekday">
                        <td class="tp-head">
                            <span>周{{day}}</span>
                        </td>
                        <td :class="myUnit(cou)" v-for="cou in course[key]">
                            <a target="_blank" @click="choseCourse(cou)" class="row-item" v-if="cou != null"
                               data-toggle="modal" data-target="#myModal">
                                <div class="row-index">{{cou.coachName}}</div>
                                <p class="row-text">流派:{{cou.style}}
                                    <br>
                                    {{cou.clName}}
                                </p>
                            </a>
                            <a target="_blank" href="" class="row-item" v-else="">
                                <div class="row-index"></div>
                                <p class="row-text"></p>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">


            <div class="modal-header">
                <h4 class="modal-title">课程详情：</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>


            <div class="modal-body">
                <h4 class="font-weight-bold text-primary">课程名称:</h4>
                <blockquote>
                    {{cou.clName}}
                </blockquote>
                <h4 class="font-weight-bold text-primary">教练:</h4>
                <blockquote>
                    {{cou.coachName}}
                </blockquote>
                <h4 class="font-weight-bold text-primary">上课时间:</h4>
                <blockquote>
                    {{cou.date}}|{{6+cou.time*2}}：00-{{8+cou.time*2}}:00
                </blockquote>
                <h4 class="font-weight-bold text-primary">流派:</h4>
                <blockquote>
                    {{cou.style}}
                </blockquote>
                <h4 class="font-weight-bold text-primary">资费:</h4>
                <blockquote>
                    {{cou.price}}/小时
                </blockquote>
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-primary" @click="sendOrder(cou)">确认</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>

</div>
<script>
    var detailvue = new Vue({
        el: "#myModal",
        data: {
            cou: '',
        },
        methods: {
            sendOrder: function (cou) {
            	 axios.get("/coach/choose", {
                     params: {
                         chooseId: detailvue.cou.id,
                     }
                 }).then(function (result) {
                     console.info(result.data);
                     if (200== result.data.code) {
                         layer.alert("成功提交申请！");
                         window.location.reload()
                     }
                 }),
               
                axios.get("/course/chose", {
                    params: {
                        courseId: detailvue.cou.id,
                    }
                }).then(function (result) {
                    console.info(result.data);
                    if (10 == result.data.code) {
                        
                        window.location.reload()
                    }
                })

            }
        }
    });
    var daysvue = new Vue({
        el: "#classTable",
        data: {
            weekday: [1],
            course: [1],
            gymId: '',

        },
        methods: {
            myInit: function () {
                var day = new Date().getDay();
                for (let i = 0; i < 7; i++) {
                    var week;
                    if ((day - 1 + i) > 6) {
                        week = "日一二三四五六日".charAt(day - 7 + i);

                    } else {
                        week = "日一二三四五六日".charAt(day + i);
                    }
                    this.weekday[i] = week;
                }
                this.gymId = GetQueryString('id');
                axios.get("/course/listAll", {
                    params: {
                        id: daysvue.gymId,
                    }
                }).then(function (result) {
                    console.info(result.data);
                    daysvue.course = result.data;
                })
            },
            myUnit: function (cou) {
                if (cou != null) {
                    if (cou.stuName == null || cou.stuName == '') {
                        return {
                            'tp-normal': true
                        }
                    } else {
                        return {
                            'tp-chosen': true,
                        }
                    }
                } else {
                    return {
                        'tp-rest2': true
                    }
                }
            },
            choseCourse: function (cou, key) {
                //点击按钮信息写入模态框
                detailvue.cou = cou;

                axios.get("/course/listAll", {
                    params: {
                        id: daysvue.gymId,
                    }
                }).then(function (result) {
                    console.info(result.data);
                    daysvue.course = result.data;
                })
            }
        }
    });
    daysvue.myInit();

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>
<script src="../js/bootstrap3.3.7.js"></script>
</body>
</html>